import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import './index.css';

const Login = () => {
  // 状态管理
  const [isLogin, setIsLogin] = useState(true);
  const [loginPhone, setLoginPhone] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [regName, setRegName] = useState('');
  const [regPhone, setRegPhone] = useState('');
  const [regPassword, setRegPassword] = useState('');
  const [showLoginPwd, setShowLoginPwd] = useState(false);
  const [showRegPwd, setShowRegPwd] = useState(false);
  const [notification, setNotification] = useState({ show: false, message: '', type: '' });
  const [rememberLogin, setRememberLogin] = useState(false);

  const navigate = useNavigate();

  // 显示通知
  const showNotification = (message, type = 'info') => {
    setNotification({ show: true, message, type });
    setTimeout(() => {
      setNotification({ show: false, message: '', type: '' });
    }, 3000);
  };

  // 切换密码显示状态
  const togglePasswordVisibility = (isLoginForm) => {
    if (isLoginForm) {
      setShowLoginPwd(!showLoginPwd);
    } else {
      setShowRegPwd(!showRegPwd);
    }
  };

  // 切换表单
  const switchForm = (login) => {
    setIsLogin(login);
  };

  // 登录处理
  const handleLogin = () => {
    // 验证手机号
    if (!loginPhone || !/^1[3-9]\d{9}$/.test(loginPhone)) {
      showNotification('请填写正确的手机号码格式', 'error');
      return;
    }

    // 验证密码
    if (!loginPassword) {
      showNotification('请输入登录密码', 'error');
      return;
    }

    // 模拟登录成功
    showNotification('登录成功，即将进入工作台', 'success');
    setTimeout(() => {
      navigate('/dashboard');
    }, 1500);
  };

  // 注册处理
  const handleRegister = () => {
    // 验证姓名
    if (!regName) {
      showNotification('请填写您的真实姓名', 'error');
      return;
    }

    // 验证手机号
    if (!regPhone || !/^1[3-9]\d{9}$/.test(regPhone)) {
      showNotification('请填写正确的手机号码', 'error');
      return;
    }

    // 验证密码
    if (!regPassword || regPassword.length < 8 || !/[A-Za-z]/.test(regPassword) || !/\d/.test(regPassword)) {
      showNotification('密码需至少8位，且包含字母和数字', 'error');
      return;
    }

    // 模拟注册成功
    showNotification('注册申请已提交，请等待管理员审核', 'success');
    setTimeout(() => {
      switchForm(true);
    }, 2000);
  };

  // 键盘事件处理（按Enter登录/注册）
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Enter') {
        isLogin ? handleLogin() : handleRegister();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isLogin, loginPhone, loginPassword, regName, regPhone, regPassword]);

  return (
    <div className='login'>
      <div className="app-container">
        {/* 顶部装饰条 */}
        <div className="top-bar"></div>

        {/* 主内容区 */}
        <main className="main-container">
          {/* 左侧：品牌与功能介绍 */}
          <div className="brand-section">
            <div className="decor-container">
              {/* 装饰元素 */}
              <div className="decor-circle-1"></div>
              <div className="decor-circle-2"></div>

              {/* 品牌标识 */}
              <div className="brand-logo">
                <div className="logo-icon">
                  <i className="fa fa-building-o"></i>
                </div>
                <h1 className="brand-title">前台员工平台</h1>
                <p className="brand-desc">便捷高效的前台工作系统，支持手机号快速登录</p>
              </div>

              {/* 核心功能 */}
              <div className="features-section">
                <h3 className="features-title">
                  <i className="fa fa-cogs"></i> 核心功能
                </h3>

                <div className="feature-card">
                  <div className="feature-icon">
                    <i className="fa fa-calendar"></i>
                  </div>
                  <div className="feature-content">
                    <h4>预约管理</h4>
                    <p>快速查询和管理客户预约信息，安排理疗服务</p>
                  </div>
                </div>

                <div className="feature-card">
                  <div className="feature-icon">
                    <i className="fa fa-user-o"></i>
                  </div>
                  <div className="feature-content">
                    <h4>客户接待</h4>
                    <p>记录客户信息，安排服务，提升接待效率</p>
                  </div>
                </div>

                <div className="feature-card">
                  <div className="feature-icon">
                    <i className="fa fa-file-text-o"></i>
                  </div>
                  <div className="feature-content">
                    <h4>工作记录</h4>
                    <p>记录每日工作内容，生成业绩报表</p>
                  </div>
                </div>
              </div>

              {/* 工作提醒 */}
              <div className="reminder-section">
                <h3 className="reminder-title">
                  <i className="fa fa-bell-o"></i> 工作提醒
                </h3>
                <p className="reminder-content">
                  请提前查看当日预约列表，准备好接待工作。建议提前15分钟了解顾客的服务需求，确保为每位顾客提供贴心周到的服务体验。
                </p>
              </div>
            </div>
          </div>

          {/* 右侧：登录/注册表单 */}
          <div className="auth-section">
            {/* 认证卡片 */}
            <div className="auth-card">
              <div className="auth-card-bg"></div>

              {/* 切换标签 */}
              <div className="tabs-container">
                <button
                  className={`tab-button ${isLogin ? 'active' : 'inactive'}`}
                  onClick={() => switchForm(true)}
                >
                  手机号登录
                </button>
                <button
                  className={`tab-button ${!isLogin ? 'active' : 'inactive'}`}
                  onClick={() => switchForm(false)}
                >
                  账号注册
                </button>
              </div>

              {/* 登录表单 */}
              <div className={`form-container ${isLogin ? 'form-visible' : 'form-hidden'}`}>
                <div className="form-group">
                  <label htmlFor="loginPhone" className="form-label">手机号码</label>
                  <div className="input-container">
                    <i className="fa fa-phone input-icon"></i>
                    <input
                      type="tel"
                      id="loginPhone"
                      className="form-input"
                      placeholder="请输入手机号码"
                      value={loginPhone}
                      onChange={(e) => setLoginPhone(e.target.value)}
                    />
                  </div>
                </div>

                <div className="form-group">
                  <label htmlFor="loginPassword" className="form-label">密码</label>
                  <div className="input-container">
                    <i className="fa fa-lock input-icon"></i>
                    <input
                      type={showLoginPwd ? "text" : "password"}
                      id="loginPassword"
                      className="form-input"
                      placeholder="请输入密码"
                      value={loginPassword}
                      onChange={(e) => setLoginPassword(e.target.value)}
                    />
                    <button
                      type="button"
                      className="password-toggle"
                      onClick={() => togglePasswordVisibility(true)}
                    >
                      <i className={showLoginPwd ? "fa fa-eye-slash" : "fa fa-eye"}></i>
                    </button>
                  </div>
                </div>

                <div className="remember-forgot">
                  <div className="remember-checkbox">
                    <input
                      id="rememberLogin"
                      type="checkbox"
                      checked={rememberLogin}
                      onChange={(e) => setRememberLogin(e.target.checked)}
                    />
                    <label htmlFor="rememberLogin">记住登录状态</label>
                  </div>
                  <a href="#" className="forgot-password">忘记密码?</a>
                </div>

                <button
                  type="button"
                  className="form-button"
                  onClick={handleLogin}
                >
                  <i className="fa fa-sign-in"></i> 登录系统
                </button>
              </div>

              {/* 注册表单 */}
              <div className={`form-container ${!isLogin ? 'form-visible' : 'form-hidden'}`}>
                <div className="form-group">
                  <label htmlFor="regName" className="form-label">姓名</label>
                  <div className="input-container">
                    <i className="fa fa-user input-icon"></i>
                    <input
                      type="text"
                      id="regName"
                      className="form-input"
                      placeholder="请输入真实姓名"
                      value={regName}
                      onChange={(e) => setRegName(e.target.value)}
                    />
                  </div>
                </div>

                <div className="form-group">
                  <label htmlFor="regPhone" className="form-label">手机号码</label>
                  <div className="input-container">
                    <i className="fa fa-phone input-icon"></i>
                    <input
                      type="tel"
                      id="regPhone"
                      className="form-input"
                      placeholder="请输入工作手机号"
                      value={regPhone}
                      onChange={(e) => setRegPhone(e.target.value)}
                    />
                  </div>
                </div>

                <div className="form-group">
                  <label htmlFor="regPassword" className="form-label">设置密码</label>
                  <div className="input-container">
                    <i className="fa fa-lock input-icon"></i>
                    <input
                      type={showRegPwd ? "text" : "password"}
                      id="regPassword"
                      className="form-input"
                      placeholder="请设置密码"
                      value={regPassword}
                      onChange={(e) => setRegPassword(e.target.value)}
                    />
                    <button
                      type="button"
                      className="password-toggle"
                      onClick={() => togglePasswordVisibility(false)}
                    >
                      <i className={showRegPwd ? "fa fa-eye-slash" : "fa fa-eye"}></i>
                    </button>
                  </div>
                  <p className="password-hint">密码长度至少8位，包含字母和数字</p>
                </div>

                <button
                  type="button"
                  className="form-button"
                  onClick={handleRegister}
                >
                  <i className="fa fa-user-plus"></i> 提交注册申请
                </button>
              </div>

              {/* 切换链接 */}
              <div className="toggle-link">
                <span className="toggle-text">
                  {isLogin ? '还没有账号? ' : '已有账号? '}
                  <button
                    className="toggle-button"
                    onClick={() => switchForm(!isLogin)}
                  >
                    {isLogin ? '立即注册' : '立即登录'}
                  </button>
                </span>
              </div>

              {/* 帮助信息 */}
              <div className="help-info">
                <p>技术支持: <span className="help-phone">400-888-9999</span></p>
              </div>
            </div>

            {/* 底部版权 */}
            <div className="copyright">
              <p>© 2023 本草轩理疗坊 - 前台管理系统</p>
            </div>
          </div>
        </main>

        {/* 通知提示 */}
        <div
          className={`notification ${notification.show ? 'show' : ''} ${notification.type}`}
        >
          <i className={
            notification.type === 'success'
              ? 'fa fa-check-circle'
              : notification.type === 'error'
                ? 'fa fa-exclamation-circle'
                : 'fa fa-info-circle'
          }></i>
          <span>{notification.message}</span>
        </div>
      </div>
    </div>
  );
};

export default Login;